<template>
	<div class="relative z-50">
		<!-- 遮罩 -->
		<transition
			enter-active-class="transition-opacity duration-300 ease-out"
			leave-active-class="transition-opacity duration-300 ease-in"
			enter-from-class="opacity-0"
			leave-to-class="opacity-0"
		>
			<div v-if="visible" class="fixed inset-0 z-50 bg-black/50 backdrop-blur-xs" @click="onClose"></div>
		</transition>
		
		<!-- 抽屉 -->
		<transition
			enter-active-class="transition-all duration-300 ease-out delay-100"
			leave-active-class="transition-all duration-200 ease-in"
			:enter-from-class="side === 'left' ? '-translate-x-full opacity-0' : 'translate-x-full opacity-0'"
			:leave-to-class="side === 'left' ? '-translate-x-full opacity-0' : 'translate-x-full opacity-0'"
			appear
		>
			<div
				v-show="visible"
				class="fixed z-[51] top-8 h-[calc(100vh-4rem)] w-[97%] bg-white shadow-2xl flex flex-col transform rounded-xl"
				:class="side === 'left' ? 'left-6' : 'right-6'"
			>
				<!-- 关闭按钮 -->
				<button
					class="absolute -top-6 z-52 w-11.5 h-11.5 rounded-full bg-[#232428] shadow-lg !cursor-pointer font-bold flex items-center justify-center text-3xl transition hover:bg-[#232428]/80 hover:shadow-xl"
					@click="onClose"
					aria-label="Close"
					:class="side === 'left' ? '-right-5' : '-right-5'"
				>
					<icon-park-close theme="outline" size="18" fill="#fff" />
				</button>
				<!-- 内容区 -->
				<div class="flex-1 min-h-0 overflow-y-auto relative">
					<slot name="content" />
				</div>
			</div>
		</transition>
	</div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Close } from '@icon-park/vue-next';

export default defineComponent({
	name: 'Drawer',
	components: {
		'icon-park-close': Close
	},
	props: {
		/*
		* 是否可见
		*/
		visible: {
			type: Boolean,
			required: true
		},
		/*
		* 方向
		*/
		side: {
			type: String,
			default: 'right',
			validator: (v: string) => ['left', 'right'].includes(v)
		}
	},
	emits: ['close'],
	methods: {
		/*
		* 关闭
		*/
		onClose() {
			this.$emit('close');
		}
	}
});
</script>